<template>
  <el-dialog
    @close="reset"
    ref="cateForm"
    :title="cateData.id > 0 ? '编辑' : '新增'"
    :visible.sync="info.isShow"
  >
    <el-form ref="cateForm" :model="cateData" label-width="80px" :rules="rules">
      <el-form-item label="上级分类" prop="pid">
        <el-select placeholder="上级分类" v-model="cateData.pid">
          <el-option :value="0" label="顶级分类"></el-option>
          <el-option
            v-for="item in cateList"
            :key="item.id"
            :label="item.catename"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="分类名称" prop="catename">
        <el-input placeholder="分类名称" v-model="cateData.catename"></el-input>
      </el-form-item>
      <el-form-item label="分类图片" v-if="cateData.pid > 0">
        <!-- 
            action: 指定上传图片的数据接口地址 
            list-type: 图片上传组件的外观样式
            on-preview: 预览图片的事件监听
            on-remove: 移除图片的事件监听
            auto-upload: 是否执行自动上传行为,默认值为true
        -->
        <el-upload
          ref="upload"
          :on-change="imgChange"
          action="#"
          list-type="picture-card"
          :auto-upload="false"
          :file-list="cateImgList"
          :limit="1"
          :on-exceed="limitTips"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="分类状态" prop="status">
        <el-radio-group v-model="cateData.status">
          <el-radio :label="1">正常</el-radio>
          <el-radio :label="2">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div class="dialog-footer" slot="footer">
      <el-button @click="reset">取消</el-button>
      <el-button type="primary" @click="submit">提交</el-button>
    </div>
  </el-dialog>
</template>

<script>
// 导入vuex辅助函数
import { mapState, mapActions } from "vuex";
export default {
  props: ["info"],
  computed: {
    ...mapState("cate", ["cateList"]),
  },
  methods: {
    ...mapActions("cate", ["getCateListAction"]),
    // 上传图片数量超出限制的回调函数
    limitTips() {
      this.$message.warning("此处只能上传一张图片");
    },
    // 更新表单数据
    setFormData(obj) {
      this.cateData = { ...obj };
      // 更新图片上传组件默认需要展示的图片列表
      this.cateImgList = [{ url: this.$baseUrl + obj.img }];
    },
    //  监听用户选择图片的行为
    imgChange(file) {
      // 手动同步数据img
      this.cateData.img = file.raw;
    },
    reset() {
      if (this.cateData.pid > 0) {
        // 清空图片上传组件中用户选择的图片
        this.$refs.upload.clearFiles();
      }
      // 重置表单元素
      this.cateData = {
        id: "",
        pid: "",
        catename: "",
        img: null,
        status: "",
      };
      //   关闭对话框组件
      this.info.isShow = false;
    },
    submit() {
      this.$refs.cateForm.validate((valid) => {
        if (valid) {
          // 发送数据
          // this.cateData => FormData
          // 创建FormData实例
          const fd = new FormData();
          for (let key in this.cateData) {
            fd.append(key, this.cateData[key]);
          }
          const url = this.cateData.id > 0 ? "/cateedit" : "/cateadd";
          this.$axios.post(url, fd).then((res) => {
            if (res.code === 200) {
              this.$message.success(res.msg);
              // 更新数据
              this.getCateListAction();
              //   重置数据
              this.reset();
            } else {
              this.$message.error(res.msg);
            }
          });
        }
      });
    },
  },
  data() {
    return {
      // 图片上传组件默认需要展示的图片列表
      cateImgList: [],
      // 表单数据
      cateData: {
        pid: "",
        catename: "",
        img: null,
        status: "",
      },
      // 表单校验规则
      rules: {
        pid: { required: true, message: "请选择上级分类", trigger: "blur" },
        catename: {
          required: true,
          message: "请输入分类名称",
          trigger: "blur",
        },
        status: { required: true, message: "请选择分类状态", trigger: "blur" },
      },
    };
  },
};
</script>

<style>
</style>